<script setup lang="ts">
import {onMounted, ref} from "vue";
import BuildTool from "@/types/BuildTool";
import {doGet, doPost} from "@/http";
import Response from "@/types/Response";

const dataList = ref([] as BuildTool[]);
const dataTableHeaders = [
  {title: '名称', key: 'name'},
  {title: '标签', key: 'tag'},
  {title: '版本', key: 'version'},
  {title: '路径', key: 'location'},
  {title: '可执行文件', key: 'executable'}
]
const detectedTools = ref([] as BuildTool[])
const scanDialogActiveFlag = ref(false)

const scan = async () => {

  detectedTools.value = (await doGet('/buildTools/available')).data

}

const handleAddBuildTool = (item: BuildTool) => {
  doPost('/buildTools', item).then((res) => {
    if (res.data.code === 200){
      dataList.value.push(item)
    }
  })
}


onMounted(async () => {
  let response = (await doGet('/buildTools')) as unknown as Response
  if (response.code === 200) {
    dataList.value = response.data
  }

  await scan()
})
</script>

<!-- eslint-disable vue/valid-v-slot -->
<template>
  <v-container>
    <v-row>
      <v-col>
        <v-btn block ripple elevation="8" color="surface-variant" @click="scanDialogActiveFlag = true">扫描</v-btn>
      </v-col>
      <v-col cols="12">
        <v-data-table :headers="dataTableHeaders" :items="dataList">

        </v-data-table>
      </v-col>
    </v-row>
  </v-container>


  <v-dialog v-model="scanDialogActiveFlag">
    <v-card>
      <v-card-title>扫描到的工具</v-card-title>
      <v-card-subtitle>
        <v-btn block color="primary" @click="scan">重新扫描</v-btn>
      </v-card-subtitle>
      <v-data-table :headers="dataTableHeaders"
                    density="compact"
                    :item-value="item => `${item.name}-${item.version}`"
                    :items="detectedTools">
        <template v-slot:item.executable="{ item }">
          <v-text-field density="compact" v-model="item.executable" label="可执行文件" />
          <v-btn icon @click="handleAddBuildTool(item)">
            <v-icon>mdi-check</v-icon>
          </v-btn>
        </template>
      </v-data-table>
    </v-card>
  </v-dialog>

</template>

<style scoped lang="scss">

</style>
